<script setup>
import { ref } from "vue";

const colors = ["#FFAE57", "#FF7853", "#EA5151", "#CC3F57", "#9A2555"];
const bgColor = "#fff";
const itemStyle = {
  star5: {
    color: colors[0],
  },
  star4: {
    color: colors[1],
  },
  star3: {
    color: colors[2],
  },
  star2: {
    color: colors[3],
  },
};
const data = [
  {
    name: "虚构",
    itemStyle: {
      color: colors[1],
    },
    children: [
      {
        name: "小说",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "疼",
              },
              {
                name: "慈悲",
              },
              {
                name: "楼下的房客",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "虚无的十字架",
              },
              {
                name: "无声告白",
              },
              {
                name: "童年的终结",
              },
            ],
          },
          {
            name: "3☆",
            children: [
              {
                name: "疯癫老人日记",
              },
            ],
          },
        ],
      },
      {
        name: "其他",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "纳博科夫短篇小说全集",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "安魂曲",
              },
              {
                name: "人生拼图版",
              },
            ],
          },
          {
            name: "3☆",
            children: [
              {
                name: "比起爱你，我更需要你",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    name: "非虚构",
    itemStyle: {
      color: colors[2],
    },
    children: [
      {
        name: "设计",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "无界面交互",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "数字绘图的光照与渲染技术",
              },
              {
                name: "日本建筑解剖书",
              },
            ],
          },
          {
            name: "3☆",
            children: [
              {
                name: "奇幻世界艺术\n&RPG地图绘制讲座",
              },
            ],
          },
        ],
      },
      {
        name: "社科",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "痛点",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "卓有成效的管理者",
              },
              {
                name: "进化",
              },
              {
                name: "后物欲时代的来临",
              },
            ],
          },
          {
            name: "3☆",
            children: [
              {
                name: "疯癫与文明",
              },
            ],
          },
        ],
      },
      {
        name: "心理",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "我们时代的神经症人格",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "皮格马利翁效应",
              },
              {
                name: "受伤的人",
              },
            ],
          },
          {
            name: "3☆",
          },
          {
            name: "2☆",
            children: [
              {
                name: "迷恋",
              },
            ],
          },
        ],
      },
      {
        name: "居家",
        children: [
          {
            name: "4☆",
            children: [
              {
                name: "把房子住成家",
              },
              {
                name: "只过必要生活",
              },
              {
                name: "北欧简约风格",
              },
            ],
          },
        ],
      },
      {
        name: "绘本",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "设计诗",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "假如生活糊弄了你",
              },
              {
                name: "博物学家的神秘动物图鉴",
              },
            ],
          },
          {
            name: "3☆",
            children: [
              {
                name: "方向",
              },
            ],
          },
        ],
      },
      {
        name: "哲学",
        children: [
          {
            name: "4☆",
            children: [
              {
                name: "人生的智慧",
              },
            ],
          },
        ],
      },
      {
        name: "技术",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "代码整洁之道",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "Three.js 开发指南",
              },
            ],
          },
        ],
      },
    ],
  },
];
for (let j = 0; j < data.length; ++j) {
  let level1 = data[j].children;
  for (let i = 0; i < level1.length; ++i) {
    let block = level1[i].children;
    let bookScore = [];
    let bookScoreId;
    for (let star = 0; star < block.length; ++star) {
      let style = (function (name) {
        switch (name) {
          case "5☆":
            bookScoreId = 0;
            return itemStyle.star5;
          case "4☆":
            bookScoreId = 1;
            return itemStyle.star4;
          case "3☆":
            bookScoreId = 2;
            return itemStyle.star3;
          case "2☆":
            bookScoreId = 3;
            return itemStyle.star2;
        }
      })(block[star].name);
      block[star].label = {
        color: style.color,
        downplay: {
          opacity: 0.5,
        },
      };
      if (block[star].children) {
        style = {
          opacity: 1,
          color: style.color,
        };
        block[star].children.forEach(function (book) {
          book.value = 1;
          book.itemStyle = style;
          book.label = {
            color: style.color,
          };
          let value = 1;
          if (bookScoreId === 0 || bookScoreId === 3) {
            value = 5;
          }
          if (bookScore[bookScoreId]) {
            bookScore[bookScoreId].value += value;
          } else {
            bookScore[bookScoreId] = {
              color: colors[bookScoreId],
              value: value,
            };
          }
        });
      }
    }
    level1[i].itemStyle = {
      color: data[j].itemStyle.color,
    };
  }
}

const option = ref({
  // 图表整体配置
  title: {
    text: "中国古代优秀文化", // 修改标题
    left: "center",
    top:10,
    textStyle: {
      color: "#2c3e50",
      fontSize: 18,
    },
  },
//   backgroundColor: bgColor, // 图表背景颜色
  color: colors, // 调色盘，用于循环系列颜色
  series: [
    // 图表系列列表
    {
      type: "sunburst", // 使用旭日图（太阳辐射图）类型
      center: ["50%", "48%"], // 图表中心位置（水平50%，垂直48%微调）
      data: data, // 数据源（树形结构数据）

      // 数据排序规则（影响层级渲染顺序）
      sort: function (a, b) {
        if (a.depth === 1) {
          // 第二层节点（depth从0开始）
          return b.getValue() - a.getValue(); // 按值降序排列
        } else {
          return a.dataIndex - b.dataIndex; // 其他层按原始数据顺序排列
        }
      },

      // 标签全局配置
      label: {
        rotate: "radial", // 标签沿径向旋转对齐
        color: bgColor, // 标签文字颜色（与背景色相同，可能隐藏标签）
      },

      // 数据项样式
      itemStyle: {
        borderColor: bgColor, // 区块边框颜色
        borderWidth: 2, // 边框宽度（分隔区块）
      },

      // 分层样式配置（索引对应数据depth层级）
      levels: [
        {}, // 第0层（根节点）使用默认配置

        // 第1层配置（depth=0的第一层子节点）
        {
          r0: 0, // 内半径起始
          r: 40, // 外半径结束
          label: {
            rotate: 0, // 标签水平显示（不旋转）
          },
        },

        // 第2层配置（depth=1的子节点）
        {
          r0: 40, // 内半径接续上层
          r: 105, // 扩展半径范围
        },

        // 第3层配置（depth=2的子节点）
        {
          r0: 115, // 内半径（与上层保持间距）
          r: 140,
          itemStyle: {
            shadowBlur: 2, // 区块阴影模糊度
            shadowColor: colors[2], // 阴影颜色取自调色盘第三色
            color: "transparent", // 区块填充透明（仅显示边框和阴影）
          },
          label: {
            rotate: "tangential", // 标签沿切线方向旋转
            fontSize: 10, // 缩小字体
            color: colors[0], // 文字颜色使用调色盘第一色
          },
        },

        // 第4层配置（depth=3的最外层节点）
        {
          r0: 140, // 紧接上层外半径
          r: 145, // 较窄的环形区域
          itemStyle: {
            shadowBlur: 80, // 大范围阴影效果
            shadowColor: colors[0], // 使用调色盘第一色作为阴影
          },
          label: {
            position: "outside", // 标签显示在外部
            // textShadowBlur: 5, // 文字阴影模糊度
            // textShadowColor: "#333", // 文字阴影颜色
          },
          downplay: {
            // 非高亮状态样式（可能需要改为emphasis）
            label: {
              opacity: 0.5, // 标签半透明
            },
          },
        },
      ],
    },
  ],
});
</script>

<template>
  <!-- 优秀文化的旭日图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
